<template>
    <div class="honor-attachment-container">
        <el-upload
            class="upload-attachment"
            :action="uploadAttachmentUrl"
            :auto-upload="true"
            :headers="headers"
            name="file"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :on-exceed="handleExceed"
            :on-change="handleChange"
            :file-list="attachmentList"
        >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可以上传各种附件，每个文件最大不超过30M</div>
        </el-upload>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth"
import {
    addPicture, addAttachment,
    getHonorPictures, deleteHonorPicture
} from "@/api/archive-honor/honor";

export default {
    name: 'HonorAttachment',
    props: {
        model: Object,
        rules: Object
    },
    data () {
        return {
            attachmentList: [],
            pictureType: 5,
            headers: {
                Authorization: "Bearer " + getToken(),
            }
        };
    },
    computed: {
        uploadAttachmentUrl () {
            return this.pictureType
                ? (process.env.VUE_APP_BASE_API + "/common/upload/" + this.pictureType)
                : (process.env.VUE_APP_BASE_API + "/common/upload")
        }
    },
    methods: {
        handleChange (file, fileList) {
            this.fileList = fileList.slice(-3);
        },
        handleRemove (file, fileList) {
            console.log(file, fileList);
        },
        handlePreview (file) {
            console.log(file);
        },
        handleExceed (files, fileList) {

            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove (file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        async uploadSuccess (res, file, fileList) {
            console.log('file:', file)
            if (res.code !== 200) {
                this.$message.error(res.msg)
                return;
            }
            //console.log('返回结果...', res)
            const filename = res.picture.originalFilename
            if (!filename) {
                return
            }

            const postData = {
                mimeType: res.picture.mimeType,
                originalFilename: res.picture.originalFilename,
                extension: res.picture.extension,
                // seoFilename: null, 
                // altAttribute: null, 
                // titleAttribute: null, 
                virtualPath: res.picture.virtualPath,
                url: res.url,
                // size: 356013, 
                honorId: this.model.honorId,
                // displayOrder: this.maxDisplayOrder + 1,
                pictureType: 5
            }


            const result = await addAttachment(postData)
            if (result.code === 200) {
                this.$emit('attachmentChange', result.msg)
                console.log('上传的附件为：', result)
            }
        },
        loadAttachments (honorModel) {
            // console.log('后台返回的附件原始：', honorModel.attachments)
            if (honorModel.attachments) {
                var attachments = JSON.parse(honorModel.attachments)
                // console.log('后台返回的附件：', attachments)
                for (let i = 0; i < attachments.length; i++) {
                    this.attachmentList.push({
                        id: attachments[i].attachmentId,
                        name: attachments[i].originalFilename,
                        url: 'http://localhost:8080' + attachments[i].virtualPath,
                    });
                }
                // console.log('附件列表：', this.attachmentList)
            } else {
                this.attachmentList = []
            }
        }
    }
}
</script>

<style scoped lang="scss">
.honor-picture-container {
    margin-left: 20px;
}
.el-upload-list__item-actions {
    display: flex;
    margin-left: 30px;
    width: 300px;
    height: 70px;
    line-height: 70px;

    align-items: center;
    justify-content: space-around;
}
</style>
